<template>
   <div class="team-container">
     <el-main>
          <div class="team_person" v-for="item in list" :key="item.name">
            <img :src=item.im alt=""/>
            <div class="flag_kuai"></div>
            <div class="person_message">
              <p class="name">{{ item.name }}</p>
              <p>{{ item.ind }}</p>
            </div>
          </div>
        </el-main>
   </div>
</template>

<script>
export default {
  name: '',
  props: {},
  components: {},
  data () {
    return {
      list: [
        { name: "张朗云", im: "https://liyun-oss1.oss-cn-beijing.aliyuncs.com/superb-class/image/img/16.jfif?versionId=CAEQDxiBgMC65.KC2BciIDY3OTFkOWY1ZmUwZjQ0OGZhODM0OTJlMTFhMDBiNjg4", ind: "产品经理" },
        { name: "马珂", im: "https://liyun-oss1.oss-cn-beijing.aliyuncs.com/superb-class/image/img/15.jfif?versionId=CAEQDxiBgMDE6OKC2BciIDFkNjhkMDA3YmNkZTQyZThiZjVhYzJlMzkxYTU1NjQ1", ind: "技术组长" },
        { name: "李云", im: "https://liyun-oss1.oss-cn-beijing.aliyuncs.com/superb-class/image/img/28.jfif?versionId=CAEQDxiBgMCG7OKC2BciIGYxMGVlMWEyZjQ3ZTRlZmNhZjRkYWJkM2I5MmYzODRh", ind: "后台开发组组长" },
        { name: "赵伟强", im: "https://liyun-oss1.oss-cn-beijing.aliyuncs.com/superb-class/image/img/18.jfif?versionId=CAEQDxiBgICI6OKC2BciIDA2YjdkOWZkZDcwZjQ4ZmZhMDA1ZTA2Y2YwYjA3OTg5", ind: "后台开发" },
        { name: "李梅芝", im: "https://liyun-oss1.oss-cn-beijing.aliyuncs.com/superb-class/image/img/32.jfif?versionId=CAEQDxiBgICi7OKC2BciIDQ3OTJiYzc4MjMxYzQyY2Y4NTk5MmVlYjc2ZmFmNTc4", ind: "前端开发组长" },
        { name: "何根", im: "https://liyun-oss1.oss-cn-beijing.aliyuncs.com/superb-class/image/img/19.jpg?versionId=CAEQDxiBgMDO6eKC2BciIGUwYTA3MTQyY2RkNTQ0MGJiZTgwOGM5NDZiNTlkNWRi", ind: "前端开发" },
        { name: "郭闯", im: "https://liyun-oss1.oss-cn-beijing.aliyuncs.com/superb-class/image/img/17.jfif?versionId=CAEQDxiBgMDh6OKC2BciIDRjMzAxZTg5ZTBkYTQzYTBiZGUwNDE0NjJjYjI0Yjkx", ind: "前端开发" },
        { name: "强琦琦", im: "https://liyun-oss1.oss-cn-beijing.aliyuncs.com/superb-class/image/img/qiang.jpg", ind: "产品助理" },
      ],
    }
  },
}
</script>

<style scoped lang="less">
.team_person{
  height: 270px;
  width: 300px;
  background-color: rgb(254,242,206);
  float: left;
  position: relative;
  transition: all 1s;
  margin: 0 15px 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px #ddd;
  cursor: pointer;
  img{
    height: 150px;
    width: 150px;
    position: absolute;
    right: 0;
  }
  .flag_kuai{
    width: 30px;
    height: 30px;
    background-color: rgb(248, 228, 174);
    position: absolute;
    right: 140px;
    top: 140px;
  }
}
.team_person:hover{
  background-color: rgb(233, 233, 235);
}
.team_person:hover .flag_kuai{
  transform: translate(20px,-20px);
  transition-duration: 500ms;
}
.person_message{
  margin-top: 150px;
  margin-left: 20px;
  .name{
    font-size: 1.6rem;
  }
}
</style>
